<template>
    <div ref="chartContainer" :style="{ width: '100%', height: '400px' }"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { ref, onMounted } from 'vue';
  import { defineProps } from 'vue';
  
  const props = defineProps({
    hostData: {
      type: Object,
      required: true
    },
  });
  
  const chartContainer = ref(null);
  const chartInstance = ref(null);
  
  onMounted(() => {
    chartInstance.value = echarts.init(chartContainer.value);
    const options = {
      title: {
        text: props.hostData.Host
      },
      tooltip: {},
      // tooltip: {
      //   trigger: 'axis',
      //   axisPointer: {
      //     type: 'shadow'
      //   }
      // },
      xAxis: {
        type: 'category',
        data: props.hostData.core_usages.map((_, index) => index + 1)
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} %'
        }
      },
      series: [{
        data: props.hostData.core_usages.map(Number),
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: '#3398DB'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}'
        }
      }]
    };
    chartInstance.value.setOption(options);
  });
  </script>
  
  <style lang="less">
  </style>
  